"use client";

import * as React from "react";

import { SuggestionPlugin } from "@platejs/suggestion/react";
import {
  type DropdownMenuProps,
  DropdownMenuItemIndicator,
} from "@radix-ui/react-dropdown-menu";
import { CheckIcon, EyeIcon, PencilLineIcon, PenIcon } from "lucide-react";
import { useEditorRef, usePlateState, usePluginOption } from "platejs/react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/plate/ui/dropdown-menu";

import { ToolbarButton } from "./toolbar";

export function ModeToolbarButton(props: DropdownMenuProps) {
  const editor = useEditorRef();
  const [readOnly, setReadOnly] = usePlateState("readOnly");
  const [open, setOpen] = React.useState(false);

  const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting");

  let value = "editing";

  if (readOnly) value = "viewing";

  if (isSuggesting) value = "suggestion";

  const item: Record&lt;string, { icon: React.ReactNode; label: string }&gt; = {
    editing: {
      icon: &lt;PenIcon /&gt;,
      label: "Editing",
    },
    suggestion: {
      icon: &lt;PencilLineIcon /&gt;,
      label: "Suggestion",
    },
    viewing: {
      icon: &lt;EyeIcon /&gt;,
      label: "Viewing",
    },
  };

  return (
    &lt;DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}&gt;
      &lt;DropdownMenuTrigger asChild&gt;
        &lt;ToolbarButton pressed={open} tooltip="Editing mode" isDropdown&gt;
          {item[value]!.icon}
          <span>{item[value]!.label}</span>
        &lt;/ToolbarButton&gt;
      &lt;/DropdownMenuTrigger&gt;

      &lt;DropdownMenuContent className="min-w-[180px]" align="start"&gt;
        &lt;DropdownMenuRadioGroup
          value={value}
          onValueChange={(newValue) =&gt; {
            if (newValue === "viewing") {
              setReadOnly(true);

              return;
            } else {
              setReadOnly(false);
            }

            if (newValue === "suggestion") {
              editor.setOption(SuggestionPlugin, "isSuggesting", true);

              return;
            } else {
              editor.setOption(SuggestionPlugin, "isSuggesting", false);
            }

            if (newValue === "editing") {
              editor.tf.focus();

              return;
            }
          }}
        &gt;
          &lt;DropdownMenuRadioItem
            className="*:first:[span]:hidden *:[svg]:text-muted-foreground pl-2"
            value="editing"
          &gt;
            &lt;Indicator /&gt;
            {item.editing!.icon}
            {item.editing!.label}
          &lt;/DropdownMenuRadioItem&gt;

          &lt;DropdownMenuRadioItem
            className="*:first:[span]:hidden *:[svg]:text-muted-foreground pl-2"
            value="viewing"
          &gt;
            &lt;Indicator /&gt;
            {item.viewing!.icon}
            {item.viewing!.label}
          &lt;/DropdownMenuRadioItem&gt;

          &lt;DropdownMenuRadioItem
            className="*:first:[span]:hidden *:[svg]:text-muted-foreground pl-2"
            value="suggestion"
          &gt;
            &lt;Indicator /&gt;
            {item.suggestion!.icon}
            {item.suggestion!.label}
          &lt;/DropdownMenuRadioItem&gt;
        &lt;/DropdownMenuRadioGroup&gt;
      &lt;/DropdownMenuContent&gt;
    &lt;/DropdownMenu&gt;
  );
}

function Indicator() {
  return (
    <span>
      &lt;DropdownMenuItemIndicator&gt;
        &lt;CheckIcon /&gt;
      &lt;/DropdownMenuItemIndicator&gt;
    </span>
  );
}
